<template>
	<view class="category">
		<scroll-view scroll-y class="left">
      <view class="category-list column center">
        <view class="category-item" :class="{'active': activeCategory.id == category.id}" v-for="(category, index) in categoryList" :key="index" @click="changeActiveCategory(category, index)">
          <text>{{category.name}}</text>
        </view>
      </view>
    </scroll-view>
    <view class="right">
       <view @click="clickLabel(item)" v-for="(item, i) in activeCategory.itemList" :key="i">{{item.name}}</view>
       <!-- <view>sdhfsdhf</view> -->
    </view>
	</view>
</template>

<script>
  export default {
		props: {
			// search 页面的 down-bar 组件中，会传递过来这个参数，代表当前点击的分类
			value: {
				type: Object,
				default: null
			}
		},
    data() {
      return {
        categoryList: [],
        // 当前选中的 分类
        activeCategory: {},
				activeCategoryIndex: 0
      }
    },
    onLoad() {
			
    },
		created() {
			this.getCategoryList()
		},
    /**
     * 监听搜索按钮
     * @param {Object} event
     */
    onNavigationBarButtonTap(event) {
      if (event.index === 0) {
        uni.navigateTo({url: '/pages/search/search?keyword=哈哈哈'})
      }
    },
    methods: {
			// 获取所有的分类列表
			getCategoryList() {
				this.categoryList = [
			    {id: 1, name: '前端开发', itemList: [
			      {id: 11,name: 'HTML/CSS'},
			      {id: 12,name: 'Sass/Less'},
			      {id: 13,name: 'JavaScript'},
			      {id: 14,name: 'TypeScript'},
			    ], active: true},
			    {id: 2, name: '后端开发', itemList: [
			      {id: 21,name: 'JAVA'},
			      {id: 22,name: 'SpringBoot'},
			      {id: 23,name: 'SpringCloud'},
			      {id: 24,name: 'Docker'},
			    ], active: false},
			    {id: 3, name: '移动开发', itemList: [
			      {id: 31,name: 'uniapp'},
			      {id: 32,name: 'flutter'},
			      {id: 33,name: 'android'},
			      {id: 34,name: 'ios'},
			    ], active: false},
			    {id: 4, name: '云计算&大数据', itemList: [
			      {id: 41,name: 'Hudoop'},
			      {id: 42,name: 'Zookeeper'},
			      {id: 43,name: 'ElesticSearch'},
			      {id: 44,name: 'Docker'},
			    ], active: false},
			    {id: 5, name: '运维&测试', itemList: [
			      {id: 51,name: '黑盒/白盒测试'},
			      {id: 52,name: 'Linux'},
			      {id: 53,name: 'XShell'},
			      {id: 54,name: 'vim'},
			    ], active: false},
			    {id: 6, name: '数据库', itemList: [
			      {id: 61,name: 'MySQL'},
			      {id: 62,name: 'Oracle'},
			      {id: 63,name: 'SqlServer'},
			      {id: 64,name: 'Redis'},
			    ], active: false},
			    {id: 7, name: '游戏', itemList: [
			      {id: 71,name: 'JAVA'},
			      {id: 72,name: 'SpringBoot'},
			      {id: 73,name: 'SpringCloud'},
			      {id: 74,name: 'Docker'},
			    ], active: false},
			  ]
				// 如果value 有值，说明此方法 是通过 search页面的 down-bar 组件点击的
				// 我们需要给给每一个 itemList 添加上"不限"的 label，然后给 category 添加一个 “全部分类”
				if (this.value) {
					this.categoryList.forEach(category => category.itemList.unshift({id: null, name: '不限'}))
					this.categoryList.unshift({id: null, name: '全部分类', itemList: []})
					// 选中激活的分类，从 value 中获取 categoryIndex，因为我们上面让category 的长度加了1，所以选中的时候也需要加上一
					this.activeCategoryIndex = this.value.categoryIndex !== undefined ? this.value.categoryIndex + 1 : this.activeCategoryIndex
				} 
				this.activeCategory = this.categoryList[this.activeCategoryIndex]
				
			},
      /**
       * 切换分类
       * @param {Object} category
       */
      changeActiveCategory(category, index) {
				this.activeCategoryIndex = index
				console.log('切换分类，原始的index', this.activeCategoryIndex)
        this.activeCategory = category
        this.categoryList.forEach(item => item.active = item === category)
				// 如果点击的是全部分类
				if (this.value && index == 0) {
					const label = {id : null, name: '全部分类', categoryId: null, categoryIndex: -1}
					this.$emit('getList', label)
					this.value.showBox = false
					return
				}
      },
			/**
			 * 点击标签
			 * @param {Object} label
			 * @param {Number} categoryIndex 
			 */
			clickLabel(label) {
				label.categoryId = this.activeCategory.id
				if (this.value) {
					// 传递的分类的索引必须减一，因为上面方法中操作索引的时候 默认给加了1
					label.categoryIndex = this.activeCategoryIndex - 1
					if (!label.id) {
						// 如果点击了不限，则 label 的名称为当前分类的名称，id 为当前分类的id
						label.name = this.activeCategory.name
					}
					// 调用查询列表的方法，并且关闭 下拉框
					this.$emit('getList', label)
					this.value.showBox = false
					return
				} else {
					label.categoryIndex = this.activeCategoryIndex
				}
				// label.categoryIndex = this.value ? this.activeCategoryIndex - 1 : this.activeCategoryIndex
				// 跳转搜索页面
				uni.navigateTo({
					url: `/pages/search/search?param=${JSON.stringify(label)}`
				})
			}
    }
  }
</script>

<style lang="scss">
  page {
    height: 100%;
    align-content: flex-start;
  }
  .category {
    display: flex;
    height: 100%;
    .left {
      width: 200rpx;
      background-color: #F8F9FB;
      border-radius: 0 10rpx 10rpx 0;
      .category-list {
        .category-item {
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          color: #888;
          // 为了让左侧的 小竖线定位的
          position: relative;
          box-sizing: border-box;
          padding: 50rpx 30rpx;
          &::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            height: 0;
            width: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          >text {
            width: 100%;
          }
        }
        .active {
          color: #007aff;
          &::before {
            height: 80rpx;
            border-left: 6rpx solid #007aff;
            border-radius: 30rpx;
          }
        }
      }
    }
    .right {
      box-sizing: border-box;
      width: 550rpx;
      padding: 40rpx 0 0 30rpx;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      view {
        padding: 20rpx 30rpx;
        border: 1rpx solid #999;
        min-width: 160rpx;
        text-align: center;
        border-radius: 30rpx;
        margin: 15rpx 10rpx;
        // font-weight: bold;
      }
    }
  }
  
</style>
